<template>
  <a-form class="inline-form">
    <section class="title">基本信息</section>
    <a-row type="flex" :gutter="16">
      <a-col :span="8">
        <a-form-item label="车辆门店">
          {{ carData.storeName }}
        </a-form-item>
      </a-col>
      <a-col :span="16">
        <a-form-item label="车辆车型">
          {{ carDesc }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="车架号">
          {{ carData.frameNum }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="发动机号">
          {{ carData.engineNum }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="车牌号">
          {{ carData.vehicleLicenceNum }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="车辆颜色">
          {{ $utils.getEnumName(vehicleColorTypeEnums, carData.color) }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="当前里程数">
          {{ carData.currentMileage }}
        </a-form-item>
      </a-col>

        <a-col :span="8">
            <a-form-item label="使用性质">
                {{ carData.useNature }}
            </a-form-item>
        </a-col>
        <a-col :span="8">
            <a-form-item label="所有人">
                {{ carData.owner }}
            </a-form-item>
        </a-col>
      <!--					<a-col :span="8">-->
      <!--						<a-form-item label="下次最迟保养时间">-->
      <!--							{{ carData.currentMileage }}-->
      <!--						</a-form-item>-->
      <!--					</a-col>-->
      <a-col :span="8">
        <a-form-item label="下次最长保养里程">
          {{ carData.maintainMileage }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="行驶证注册日期">
          {{ carData.drivingRegisteredDate && moment(carData.drivingRegisteredDate).format('YYYY-MM-DD') }}
        </a-form-item>
      </a-col>
     <!-- <a-col :span="8">
        <a-form-item label="车上配置">
          {{ vehicleConfigNames }}
        </a-form-item>
      </a-col> -->
      <a-col :span="24">
        <a-form-item
          class="block"
          label="行驶证件"
        >
          <PreviewImage class="mt-12" v-if="carData.driveLicenceImg" v-model="carData.driveLicenceImg.split(',')"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-divider class="mt-0 mb-24"/>
    <section class="title">保险&年检信息</section>
    <a-row type="flex" :gutter="16">
      <a-col :span="8">
        <a-form-item label="商业保险公司">
          {{ carData.insuranceCompany }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="商业险保单号">
          {{ carData.insurancePolicyNo }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="投保所使用证件号">
          {{ carData.insuranceInfoCertificateNo }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="商保到期时间">
          {{ carData.insuranceExpireDate && moment(carData.insuranceExpireDate).format('YYYY-MM-DD') }}
        </a-form-item>
      </a-col>

        <a-col :span="8">
            <a-form-item label="交强险公司">
                {{ carData.compulsoryInsuranceCompany }}
            </a-form-item>
        </a-col>

        <a-col :span="8">
            <a-form-item label="交强险单号">
                {{ carData.compulsoryInsurancePolicyNo }}
            </a-form-item>
        </a-col>
        <a-col :span="8">
            <a-form-item label="交强险投保使用证件号">
                {{ carData.compulsoryInsuranceCertificateNo }}
            </a-form-item>
        </a-col>

      <a-col :span="8">
        <a-form-item label="强险到期时间">
          {{ carData.clivtaExpireDate && moment(carData.clivtaExpireDate).format('YYYY-MM-DD') }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="三者险额度">
          {{ carData.insuranceAmount }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="车损起赔额度(元)">
          {{ carData.minCompensationFee }}
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item class="block" label="强险保单">
          <PreviewImage class="mt-12" v-if="carData.compulsoryInsuranceImg" v-model="carData.compulsoryInsuranceImg.split(',')"/>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item class="block" label="商业险保单">
          <PreviewImage class="mt-12" v-if="carData.businessInsuranceImg" v-model="carData.businessInsuranceImg.split(',')"/>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import moment from 'moment'
export default {
  name: 'TravelInfo',
  props: {
    carData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      transmissionTypeEnums: [],
      vehicleSourceEnums: [],
      vehicleColorTypeEnums: [],
      vehicleConfigEnums: []
    }
  },
  computed: {
    carDesc() {
      return this.$utils.getVehicleTypeName(this.carData)
    },
    // vehicleConfigNames() {
    //   if (!this.carData.vehicleConfigs) return
    //   return this.vehicleConfigEnums.filter(item => this.carData.vehicleConfigs.split(',').filter(e => e).includes(`${item.value}`)).map(e => e.name).join(',')
    // },
    liabilityInsuranceArr() {
      return [this.liabilityInsuranceDriver, this.liabilityInsurancePassenger]
    }
  },
  async created() {
    this.transmissionTypeEnums = await this.$utils.getDictList('TransmissionType')
    this.vehicleSourceEnums = await this.$utils.getDictList('VehicleSource')
    this.vehicleConfigEnums = await this.$utils.getDictList('VehicleConfig')
    this.vehicleColorTypeEnums = await this.$utils.getDictList('VehicleColorType')
  },
  methods: {
    moment
  }
}
</script>
<style lang="less" scoped>
  @import "./info";
  .inline-form {
      margin-bottom: 0;
  }

  .title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: bold;
  }

  .block {
    display: block !important;

    /deep/ .ant-form-item-label {
      width: auto;
    }
  }
</style>
